<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title>操作</title>
</head>
<body>
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    .type{
        overflow: hidden;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        background: white;
        z-index: 9999;
    }
    .type div{
        float: left;
        height: 30px;
        border-bottom: 1px solid #dcdcdc;
        border-right: 1px solid #dcdcdc;
        box-sizing: border-box;
    }
    .type div p{
        text-align: center;
        line-height: 30px;
        font-size: 13px;
        width: 80%;
        margin: auto;

    }
    .active{
        border-bottom: 1px solid red;
    }
    .form{
        margin-top: 75px;
        width: 100%;
    }
    .line{
        overflow: hidden;
    }
    .line p{
        float: left;
        width: 100%;
        text-align: center;
        height: 25px;
        line-height: 25px;
        margin-right: 7px;
        font-size: 14px;
    }

    input[type=file]{
        opacity: 0;
    }
    .box{
        height: 6px;
        background: #ececec;
    }
    .btn{
        width: 145px;
        background: #9bcee6;
        color: white;
        margin: auto;
        line-height: 35px;
        font-size: 15px;
        text-align: center;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        margin-top: 12px;
    }
    .add{
        position: fixed;
        left: 0px;
        top: 30px;
        width: 50%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        background: #7ca6da;
        color: white;
        font-size: 14px;
        z-index: 99;
        }
    .tooggle{
        position: fixed;
        right: 0px;
        top: 30px;
        width: 50%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        background: #93cdff;
        color: white;
        font-size: 14px;
        z-index: 99;
    }
    .changes,
    .addForm{
        padding-top: 10px;
        position: fixed;
        top: -800px;
        left: 0px;
        width: 100%;
        transition: .3s all;
        background: white;
        z-index: 9;
        height: 100%;
    }
    .changes div,
    .addForm div{
        overflow: hidden;
    }
    .changes div p,
    .addForm div p{
        float: left;
        width: 45%;
        height: 31px;
        line-height: 31px;
        text-align: right;
        font-size: 14px;
    }
    .changes div input,
    .addForm div input{
        height: 31px;
        float: left;
        width: 40%;
        line-height: 31px;
        border: 0px;
        border-bottom: 1px solid #dcdcdc;
    }
    .btns{
        line-height: 35px;
        background: #9bcee6;
        width: 45%;
        font-size: 15px;
        color: white;
        border-radius: 5px;
        margin: auto;
        margin-top: 18px;
        text-align: center;

        margin-left: 3%;
        float: left;
    }

    .no{
        line-height: 35px;
        background: #e69ba9;
        width: 45%;
        font-size: 15px;
        color: white;
        border-radius: 5px;
        margin: auto;
        margin-top: 18px;
        margin-right: 3%;
        float: right;
        text-align: center;
    }
    .changes select,
    .addForm select{
        border: 0px;
        height: 35px;
        border-bottom: 1px solid #dcdcdc;
        width: 40%;
    }
    .hides{
        display: none;
    }
    .number{
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 999999;
        left: 0px;
        top: -1000px;
        background: white;
        transition: .6s all;
    }
    .number .as{
        position: absolute;
        left: 0px;
        top: 0px;
        width: 90%;
        overflow: hidden;
        margin-left: 5%;
        margin-top: 12px;
        border-bottom: 1px solid #dcdcdc;
        padding-bottom: 12px;
    }
    .number .as p{
        font-size: 14px;
        line-height: 35px;
        background: #3894b3;
        width: 20%;
        color: white;
        text-align: center;
        border-radius: 5px;
        margin-bottom: 12px;
    }
    .number .as select{
        float: left;
        width: 50%;
        height: 35px;
        border: 0px;
        text-align: center;
        color: white;
        background: #48c9dc;
    }
    .number .as select:nth-child(2) {
        background: #7493dc;
    }
    .dataTimes,
    .dataTime{
        width: 45%;
        margin-top: 12px;
        height: 40px;
        line-height: 40px;
        border: 0px;
        float: left;
        margin-right: 5%;
        display: block;
    }
    dataTimes{
        float: right;
        width: 45%;
        margin-top: 12px;
        height: 40px;
        line-height: 40px;
        border: 0px;
        margin-right: 5%;
    }
    .numberAll{
        line-height: 50px;
        text-indent: 1em;
        font-size: 21px;
    }
    .numberAll b{
        color: #3ad4ce;
        letter-spacing: 1px;
    }
</style>
    <div class="number">
        <div class="as" >
        <p onclick="$('.number').css('top','-1000px')">返回</p>
            <select name="" id="types" onchange="types">
                <option value="3">选择贷款类型</option>
            </select>
            <select name="" id="product" onchange="product">
                <option value="">选择产品类别</option>
            </select>
            <input class="dataTime" type="date">
            <input class="dataTimes" type="date">
            <div class="numberAll"><b>213213</b> 次</div>
        </div>
    </div>
    <div class="add" onclick="add()">
        增加产品信息
    </div>
<div class="tooggle" onclick="$('.number').css('top','0px')">
    访问量统计
</div>
    <div class="type">

    </div>
<div class="form">

</div>
<div class="changes">

    <div>
        <p>名称：</p>
        <input type="text" class="bank_name">
    </div>
    <div>
        <p>简介：</p>
        <input type="text" class="synopsis">
    </div>
    <div>
        <p>贷款类型：</p>
        <select name="" class="loan_type"></select>
    </div>
    <div>
        <p>产品类别：</p>
        <select name="" class="category_id"></select>
    </div>
    <div>
        <p>特点：</p>
        <input type="text" class="characteristic">
    </div>
    <div>
        <p>申请条件：</p>
        <input type="text" class="apply_requirement">
    </div>
    <div>
        <p>综合费用：</p>
        <input type="text" class="colligate_cost">
    </div>
    <div>
        <p>需要资料：</p>
        <input type="text" class="need_material">
    </div>
    <div>
        <p>贷款期限：</p>
        <input type="text" class="loan_term">
    </div>
    <div>
        <p>还款方式：</p>
        <input type="text" class="repayment_mode">
    </div>
    <div>
        <p>贷款额度：</p>
        <input type="text" class="loan_quota">
    </div>
    <div class="btns">
        确认修改
    </div>
    <div class="no" onclick='$(".changes").css("top","-800px")'>
        取消
    </div>
</div>
<div class="addForm">

    <div>
        <p>名称：</p>
        <input type="text" class="bank_name">
    </div>
    <div>
        <p>简介：</p>
        <input type="text" class="synopsis">
    </div>
    <div>
        <p>贷款类型：</p>
        <select name="" class="loan_type"></select>
    </div>
    <div>
        <p>产品类别：</p>
        <select name="" class="category_id"></select>
    </div>
    <div>
        <p>特点：</p>
        <input type="text" class="characteristic">
    </div>
    <div>
        <p>申请条件：</p>
        <input type="text" class="apply_requirement">
    </div>
    <div>
        <p>综合费用：</p>
        <input type="text" class="colligate_cost">
    </div>
    <div>
        <p>需要资料：</p>
        <input type="text" class="need_material">
    </div>
    <div>
        <p>贷款期限：</p>
        <input type="text" class="loan_term">
    </div>
    <div>
        <p>还款方式：</p>
        <input type="text" class="repayment_mode">
    </div>
    <div>
        <p>贷款额度：</p>
        <input type="text" class="loan_quota">
    </div>
    <div class="btns">
        确认增加
    </div>
    <div class="no" onclick='$(".addForm").css("top","-800px")'>
        取消
    </div>
</div>

    <script src="./scripts/jquery-1.10.1.min.js"></script>
    <script>
        function types() {
            console.log(s)
        }
        function change(s){
            console.log(s)
            $(".changes").css("top","64px")
        }
        function save(index,id){
            var formData =  new FormData
            formData.append("id",$(".id"+index).val())
            formData.append("apply_requirement",$(".apply_requirement"+index).val())
            formData.append("bank_name",$(".bank_name"+index).val())
            formData.append("category_id",$(".category_id"+index).val())
            formData.append("characteristic",$(".characteristic"+index).val())
            formData.append("colligate_cost",$(".colligate_cost"+index).val())
            formData.append("loan_quota",$(".loan_quota"+index).val())
            formData.append("loan_term",$(".loan_term"+index).val())
            formData.append("loan_type",$(".loan_type"+index).val())
            formData.append("logo_path","./login")
            // formData.append("logo_path",$(".logo_path"+index)[0].files[0])
            formData.append("synopsis",$(".synopsis"+index).val())
            formData.append("need_material",$(".need_material"+index).val())
            formData.append("repayment_mode",$(".repayment_mode"+index).val())
            formData.append("status",$(".status"+index).val())
            $.ajax({
                url:"/loan/loanBankProduct/updateLoanBankProduct",
                type:"post",
                processData: false,
                data:formData,
                success:function(ss){

                }
            })
        }
        window.onload = function(){
            $.ajax({
                type:'post',
                url:'/loan/baseDatadictionary/loadBaseDatadictionaryForCode',
                data:{code:'CPLB'},
                dataType:'json',
                success : function(data){
                    console.log(data)
                }
            })

            $.ajax({
                url:"/loan/loanCategory/loadLoanCategoryDataSet",
                type:"post",
                success:function(ss){
                    var a = ''
                    var c = ''
                    for (var i = 0;i<ss.data.dataSet.rows.length;i++){
                        c +="<option value='"+ ss.data.dataSet.rows[i].id +"'>" + ss.data.dataSet.rows[i].category_name + "</option>"
                        a += "<div style='width:33.33%;' onclick='tab(\""+ ss.data.dataSet.rows[i].id +"\",this)'> <p>"+ ss.data.dataSet.rows[i].category_name +"</p></div>"
                    }
                    $(".type").append(a)
                    $("#types").append(c)
                }
            })
            $.ajax({
                url:"/loan/loanBankProduct/loadLoanBankProductDataSet",
                type:"post",
                success:function(ss){
                    $(".form").html('')
                    var dir = {
                        "create_time":"创建时间",
                        "synopsis":"简介",
                        "logo_path":"银行图片",
                        "loan_type":"贷款类型",
                        "characteristic":"特点",
                        "update_time":"修改时间",
                        "apply_requirement":"申请条件",
                        "category_id":"贷款类型",
                        "colligate_cost":"综合费用",
                        "need_material":"需要资料",
                        "bank_name":"银行名称",
                        "loan_term":"贷款期限",
                        "id":"编号",
                        "loan_quota":"贷款期限",
                        "repayment_mode":"还款方式",
                        "status":"状态"
                    }
                    var b = ''
                    for (var i = 0; i < ss.data.dataSet.rows.length; i++) {
                        for(var key in ss.data.dataSet.rows[i]){
                            if(key == 'status' || key == 'id' || key == 'create_time' || key == 'update_time'  ){

                            }else{
                                if(key != "logo_path"){
                                    if(key == 'bank_name' || key == 'loan_type'|| key == 'colligate_cost'|| key == 'loan_term' ){
                                        b += `<div class="line"><p>${dir[key]}： ${ss.data.dataSet.rows[i][key]}</p></div>`
                                    }else{
                                        b += `<div class="line hides${i}" style="display:none;"><p>${dir[key]}： ${ss.data.dataSet.rows[i][key]}</p></div>`

                                    }
                                }else{

                                }
                            }
                        }
                        var c = b + "<div style='overflow: hidden;'><div style='background: #8fcbce;color: white;text-align: center;display: block;font-size:13px;border-top: 1px solid #dcdcdc;padding-top: 12px;margin-top: 12px;padding-bottom: 12px;float: left;width: 50%;' onclick=\"change("+ ss.data.dataSet.rows[i].id +")\">修改</div><div style='width: 50%;float: left;background: #e27676;color: white;text-align: center;display: block;font-size:13px;border-top: 1px solid #dcdcdc;padding-top: 12px;margin-top: 12px;padding-bottom: 12px;' onclick=\"change("+ ss.data.dataSet.rows[i].id +")\">删除</div></div><div class='btn hides"+i+"' style='display:none;' onclick='save(\""+ i + "\",\""+ ss.data.dataSet.rows[i].id + "\")'>确认保存</div><div class='box'></div>"
                        b = ""
                        $(".form").append(c)
                    }
                }
            })

        }
        //
        function add(){
            $(".addForm").css("top","64px")
        }

        function tab(id,_this){
            $(".type div").css("borderBottom","1px solid #dcdcdc")
            $(_this).css("borderBottom","1px solid red")
            $.ajax({
                url:"/loan/loanBankProduct/loadLoanBankProductDataSet",
                type:"post",
                data:{
                    category_id:id
                },
                success:function(ss){
                    $(".form").html('')
                    var dir = {
                        "create_time":"创建时间",
                        "synopsis":"简介",
                        "logo_path":"银行图片",
                        "loan_type":"贷款类型",
                        "characteristic":"特点",
                        "update_time":"修改时间",
                        "apply_requirement":"申请条件",
                        "category_id":"贷款类型",
                        "colligate_cost":"综合费用",
                        "need_material":"需要资料",
                        "bank_name":"银行名称",
                        "loan_term":"贷款期限",
                        "id":"编号",
                        "loan_quota":"贷款期限",
                        "repayment_mode":"还款方式",
                        "status":"状态"
                    }
                    var b = ''
                    for (var i = 0; i < ss.data.dataSet.rows.length; i++) {
                        for(var key in ss.data.dataSet.rows[i]){
                            if(key == 'status' || key == 'id' || key == 'create_time' || key == 'update_time'  ){

                            }else{
                                if(key != "logo_path"){
                                    if(key == 'bank_name' || key == 'loan_type'|| key == 'colligate_cost'|| key == 'loan_term' ){
                                        b += `<div class="line"><p>${dir[key]}： ${ss.data.dataSet.rows[i][key]}</p></div>`
                                    }else{
                                        b += `<div class="line hides${i}" style="display:none;"><p>${dir[key]}： ${ss.data.dataSet.rows[i][key]}</p></div>`

                                    }
                                }else{

                                }
                            }
                        }
                        var c = b + "<div style='overflow: hidden;'><div style='background: #8fcbce;color: white;text-align: center;display: block;font-size:13px;border-top: 1px solid #dcdcdc;padding-top: 12px;margin-top: 12px;padding-bottom: 12px;float: left;width: 50%;' onclick=\"change("+ ss.data.dataSet.rows[i].id +")\">修改</div><div style='width: 50%;float: left;background: #e27676;color: white;text-align: center;display: block;font-size:13px;border-top: 1px solid #dcdcdc;padding-top: 12px;margin-top: 12px;padding-bottom: 12px;' onclick=\"change("+ ss.data.dataSet.rows[i].id +")\">删除</div></div><div class='btn hides"+i+"' style='display:none;' onclick='save(\""+ i + "\",\""+ ss.data.dataSet.rows[i].id + "\")'>确认保存</div><div class='box'></div>"
                        b = ""
                        $(".form").append(c)
                    }
                }
            })
        }
    </script>
</body>
</html>